<template>
	<view>
		<view :class="['digital-keyboard',{'keyboard-show':!keyBoardSwitch}]"
		@tap.stop="">
			<view class="list" :hover-start-time='0' 
			@tap.stop="setKey(key)" :hover-stay-time="200" hover-class="key-hove" 
			v-for="(key,index) in data" :key='index'>
				<view class="list-key">
					{{key=='.'&&!decimalPoint?'':key}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default{
		props:['keyBoardSwitch', 'decimalPoint'],
		data(){
			return{
				data:[1,2,3,4,5,6,7,8,9,'',0,''],
				value:'',
			}
		},
		
		methods:{
			setKey(k){
				if(k==='.'&&!this.decimalPoint){
					return;
				}
				k===''?this.value=this.value.substring(0,this.value.length-1):this.value+=k.toString();
				this.$emit('change',k)
			},
		},
		watch:{
			keyBoardSwitch:function(){
				if(!this.keyBoardSwitch)this.$emit('closeKeyboard',this.value);
			}
		}
	}
</script>

<style lang="scss">
	.digital-keyboard{
		width: 90vw;
		position: fixed;
		bottom: 31rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: ($border-radius-box);
		.list{
			width: 33.3%;
			height: 120upx;
			line-height: 120upx;
			box-sizing: border-box;
			float: left;
			text-align: center;
			font-size: 24px;
			background-color: #fff;
			font-weight: bold;
			position: relative;
			.list-key{
				position: relative;
				z-index: 2;
			}
			&:nth-child(3n){

			}
			&:last-child{
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					width: 50upx;
					height: 50upx;
					background: url('')no-repeat;
					background-size: 100% 100%;
					z-index: 2;
				}
			}
		}
		.key-hove{
			&:after{
				position: absolute;
				width: 90rpx;
				height: 90rpx;
				content: "";
				left: 50%;
				top: 50%;
				margin-left: -45rpx;
				margin-top: -45rpx;
				background: #bbb;
				z-index: 1;
				border-radius: 50%;
			}
		}
	}
	.keyboard-show{
		height: 0;
	}
</style>
